/**
 * 起末站点控件
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Icon from '../../public/icon';
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';

export default class StartAndEndPosition extends Component {
  static defaultProps = {
    startName: '输入出发地',
    endName: '输入目的地',
    switch: ()=>{},
    changeStartStation: ()=>{},
    changeEndStation: ()=>{},
    style: {}
  }

  render () {
    return (
      <View style={[styles.container, flexStyle.flexH, flexStyle.flexVc, this.props.style]}>
        <View style={styles.startAndEnd}>
          {/* 起始站展示 */}
          <TouchableOpacity style={[{ flex: 1 }, flexStyle.flexH, flexStyle.flexVc]} onPress={this.props.changeStartStation}>
            <Icon name={'mypoint'} style={styles.icon}
              size={38}/>
            <View style={[{ flex: 5, height: '100%', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#DDDDDD' }, flexStyle.flexH, flexStyle.flexVc]}>
              <Text style={styles.input}>{this.props.startName}</Text>
            </View>
          </TouchableOpacity>
          {/* 终末站展示 */}
          <TouchableOpacity style={[{ flex: 1 }, flexStyle.flexH, flexStyle.flexVc]} onPress={this.props.changeEndStation}>
            <Icon name={'circle-o'} style={styles.icon}
              size={30} color={'#EB6363'}/>
            <Text style={[{ flex: 5 }, styles.input]}>{this.props.endName}</Text>
          </TouchableOpacity>
        </View>
        {/* 切换按钮展示 */}
        <TouchableOpacity style={[{ width: px2dp(105), height: '100%' }, flexStyle.flexH, flexStyle.flexHc, flexStyle.flexVc]} onPress={this.props.switch}>
          <Icon name={'change'}
            size={30}/>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: px2dp(201),
    backgroundColor: '#ffffff'
  },

  icon: {
    flex: 1,
    textAlign: 'center'
  },

  startAndEnd: {
    flex: 1
  },

  input: {
    width: '100%'
  }
});